<template>
        <div>
                <van-nav-bar title="详情页"
                             left-text="返回"
                             right-text="..."
                             left-arrow
                             @click-left="$router.go(-1)" />
                <div class="top"
                     :style="{backgroundImage:'url(' +(shopinfo.info&&shopinfo.info.poi_back_pic_url)+ ')'}">
                        <div class="top2">
                                <div class="top3">
                                        <img :src="shopinfo.info&&shopinfo.info.picUrl"
                                             alt="">
                                </div>
                                <span>{{shopinfo.info&&shopinfo.info.name}}</span>
                        </div>
                        <div @click="fun()">❤</div>
                </div>
                <div class="shopinfo">
                        <div class="left">
                                <van-sidebar v-model="currentIndex">
                                        <van-sidebar-item v-for="(item,index) in shopinfo.taglist"
                                                          :key="index"
                                                          :title="item.name" />

                                </van-sidebar>
                        </div>
                        <div class="right">
                                <div class="top6"
                                     v-for="(item,index) in shopinfo.taglist&&shopinfo.taglist[currentIndex].goodlist"
                                     :key="index">
                                        <div class="top1">
                                                <img :src="item.picture"
                                                     alt="">
                                        </div>
                                        <div class="top2">
                                                <div class="top3">
                                                        <p>{{item.name}}</p>
                                                        <p>{{item.month_saled_content}}</p>

                                                </div>
                                                <div class="top4">
                                                        <span>￥{{item.min_price}}</span>
                                                        <div class="top5">
                                                                <button>-</button>
                                                                <span>1</span>
                                                                <button>+</button>
                                                        </div>

                                                </div>
                                        </div>
                                </div>

                        </div>

                </div>
        </div>

</template>

<script>
import { shop_shopinfo } from '../utils/api'
import { Dialog } from 'vant';

export default {
        data () {
                return {
                        shopinfo: {},
                        currentIndex: 0,

                }
        },
        methods: {
                fun () {
                        this.$store.commit('collect', shopinfo);
                        console.log(你好);

                }
        },

        mounted () {
                // console.log(this.$route.params.id)
                shop_shopinfo({ id: this.$route.params.id }).then((res) => {


                        if (res.data.shopinfo) {
                                this.shopinfo = res.data.shopinfo

                        } else {
                                Dialog.alert({
                                        title: '提示',
                                        message: '该店铺已倒闭',
                                        theme: 'round-button',
                                }).then(() => {
                                        this.$router.go(-1)
                                });

                        }
                        console.log(this.shopinfo)
                })
        }

}
</script>

<style lang="scss" scoped>
.top {
        display: flex;
        justify-content: space-between;
        padding: 50px 10px;
        color: white;
        > .top2 {
                display: flex;
                align-items: center;
                > .top3 {
                        width: 30px;
                        margin-right: 10px;
                        > img {
                                width: 100%;
                                border-radius: 50px;
                        }
                }
        }
}
.shopinfo {
        display: flex;
        .right {
                //
                // justify-content: space-between;
                > .top6 {
                        display: flex;
                        flex: 1;
                        margin: 15px;
                        font-size: 12px;
                        padding: 10px;
                        > .top1 {
                                width: 80px;
                                margin-right: 10px;
                                > img {
                                        width: 100%;
                                }
                        }
                        > .top2 {
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                > .top4 {
                                        display: flex;
                                        justify-content: space-between;
                                        margin-top: 20px;
                                        > .top5 {
                                                > button {
                                                        width: 13px;
                                                        height: 15px;
                                                        text-align: center;
                                                        line-height: 15px;
                                                }
                                        }
                                }
                        }
                }
        }
}
</style>